/*
	Author       :	Themesbazer
	Template Name:	Slider js
	Version      :	1.0
*/

(function ($) {
    "use strict";


    //**===================START HOME SLIDER JS===================**//
    $('.atf-slick-slider-1').slick({
        arrows: true,
        autoplay: false,
        dots: false,
        infinite: true,
        speed: 1000,
        loop: true,
        effect: 'fade',
        slidesToShow: 1,
        adaptiveHeight: true,
        slidesToScroll: 1,
        prevArrow: '<a class="slick-prev"><i class="fa-solid fa-arrow-left-long" alt="Arrow Icon"></i></a>',
        nextArrow: '<a class="slick-next"><i class="fa-solid fa-arrow-right-long" alt="Arrow Icon"></i></a>',
    });

    /* --------------------------------------------------------
         Start CHOOSE Design
       --------------------------------------------------------- */
    $('.atf__product-slider-active').slick({
        arrows: true,
        dots: false,
        infinite: true,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 1,
        prevArrow: '<a class="slick-prev"><i class="fa-solid fa-arrow-left-long" alt="Arrow Icon"></i></a>',
        nextArrow: '<a class="slick-next"><i class="fa-solid fa-arrow-right-long" alt="Arrow Icon"></i></a>',
        responsive: [
            {
                breakpoint: 1200,
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 992,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    arrows: false,
                    dots: true,
                }
            },
            {
                breakpoint: 580,
                settings: {
                    arrows: false,
                    dots: true,
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });


    /* --------------------------------------------------------
     Start HOT DEALS  Design
   --------------------------------------------------------- */
    $('.atf__hot-slider-active').slick({
        arrows: true,
        dots: false,
        // autoplay:true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        effect: 'fade',
        slidesToScroll: 1,
        prevArrow: '<a class="slick-prev"><i class="fa fa-angle-left" alt="Arrow Icon"></i></a>',
        nextArrow: '<a class="slick-next"><i class="fa fa-angle-right" alt="Arrow Icon"></i></a>',
        responsive: [
            {
                breakpoint: 1200,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    dots: true,
                    arrows: false,
                }
            },
            {
                breakpoint: 992,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    dots: true,
                    arrows: false,
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    arrows: false,
                    dots: true,
                }
            },
            {
                breakpoint: 580,
                settings: {
                    arrows: false,
                    dots: true,
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });
	// 获取当前索引并更新显示
	function updateCurrentIndex() {
		var currentIndex = $('.atf__hot-slider-active').slick('slickCurrentSlide');
		var totalCount = $('.atf__hot-slider-active').slick('getSlick').slideCount;
		$('#current-index').text(currentIndex+1 + ' / ' + totalCount);
	}
	// 初始化时更新索引
	updateCurrentIndex();
	// 轮播切换时更新索引
	$('.atf__hot-slider-active').on('afterChange', function () {
		updateCurrentIndex();
	});
    /* --------------------------------------------------------
        Star Client
    --------------------------------------------------------- */
    var owl = $('#atf-testimonial-slider').owlCarousel({
        margin: 3,
        autoplay: false,
        items: 1,
        loop: false,
        nav: true,
        navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
        dots: false,
        responsive: {
            0: {
                items: 1
            },
            767: {
                items: 1
            },
            768: {
                items: 1
            },
            992: {
                items: 1
            }
        }
    })
    // 轮播切换时更新样式
    $('.nav-text').on('click', function () {
        var slideIndex = parseInt($(this).data('slide-index'));
        owl.trigger('to.owl.carousel', [slideIndex, 300]);
    });
    // 监听轮播滚动事件
    $('.owl-carousel').on('changed.owl.carousel', function (event) {
        // 获取当前活动项的索引
        var currentIndex = event.item.index;
        // 移除所有div的高亮样式
        $('.linked-divs div').removeClass('tabTextActive');
        // 为对应索引的div添加高亮样式
        $('.linked-divs div').eq(currentIndex).addClass('tabTextActive');
    });
    /* --------------------------------------------------------
        END CLIENT
    --------------------------------------------------------- */
    const textarea = $('#textarea');
    const charCount = $('#current-count');
    // 初始化字数统计
    updateCount();
    // 监听输入事件
    textarea.on('input', updateCount);
    // 更新字数统计和状态
    function updateCount() {
        const length = textarea.val().length;
        charCount.text(length);
    }

})(jQuery);